<template>
  <h3>缓存路由组件+新生命周期函数(activated,deactivated) 演示</h3>
  <p>
    <router-link class="link" to="/routealive/first/1">First page</router-link>
    <router-link class="link" to="/routealive/other/1">Second page</router-link>
  </p>

  <router-view v-slot="{ Component }">
    <keep-alive include="first">
      <component :is="Component"/>
    </keep-alive>
  </router-view>

  <hr>
  <p>
    注意:<br>
    1. 缓存组件时的 include 后面跟的是组件名.<br>
    2. 被缓存的组件在切换到其他页面时可以使用新的 activated,deactivated 生命周期钩子函数. 这两个函数只对缓存组件有效.<br>
    官方文档: <a href="https://router.vuejs.org/zh/guide/migration/#router-view-%E3%80%81-keep-alive-%E5%92%8C-transition"><b>router-view、keep-alive 和 transition</b></a>
  </p>
</template>

<style scoped>
  .link {
    display: inline-block;
    width: 128px;
    height: 36px;
    line-height: 36px;
    /* padding: 5px 15px; works except border and bold font */

    margin-top: 5px;
    margin-left: 10px;
    text-align: center;
  }

  .router-link-active {
    font-weight: bold;
    color: orange;
    background-color: #205081;
    border-radius: 2px;
  }

  .router-link-active:hover {
    background-color: #3b73af;
  }

  .router-link-exact-active {
    color: whitesmoke;
  }

  .link:hover {
    border-radius: 3px;
    /* border: 1px solid burlywood; */
    background-color: #3b73af;
    color: white;
  }
</style>